<template>
  <div>
    <el-row>
      <el-card style="background-color: white">
        <!--        第一行-->
        <el-form class="form">
          <text-input
            v-model="formData.inputValue"
            :title="'派件任务编号'"
            placeholder="请输入"
          ></text-input>
          <text-input
            v-model="formData.inputValue"
            :title="'订单编号'"
            placeholder="请输入"
          ></text-input>
          <select-input
            v-model="formData.selectedOption"
            :options="options"
            :title="'所属营业部'"
            placeholder="请输入"
          ></select-input>
        </el-form>
        <!--        第二行-->
        <el-form class="form">
          <select-input
            v-model="formData.selectedOption"
            :options="options"
            :title="'签收状态'"
            placeholder="请输入"
          ></select-input>
          <time-input
            :title="'预计完成时间'"
            v-model="formData.stateDateTime"
          ></time-input>
          <time-input
            :title="'实际完成时间'"
            v-model="formData.stateDateTime"
          ></time-input>
        </el-form>
        <!--        第三行-->
        <el-form>
          <select-input
            v-model="formData.selectedOption"
            :options="options"
            :title="'任务分配状态'"
            placeholder="请输入"
          ></select-input>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import TextInput from "@/components/textInput.vue";
import SelectInput from "@/components/selectInput.vue";
import TimeInput from "@/components/timeInput.vue";
export default {
  components: { SelectInput, TextInput, TimeInput },
  data() {
    return {
      formData: {
        selectedOption: "",
        inputValue: "",
        stateDateTime: "",
      },
      options: [
        { label: "选项一", value: "option1" },
        { label: "选项二", value: "option2" },
        { label: "选项三", value: "option3" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  justify-content: space-between;
}
</style>
